<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ list.length }}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{ selected: current == '全部' }" @click="turn('全部')" href="javascript:;">全部</a>
      </li>
      <li>
        <a :class="{ selected: current == '未完成' }"  @click="turn('未完成')" href="javascript:;">未完成</a>
      </li>
      <li>
        <a :class="{ selected: current == '已完成' }" @click="turn('已完成')" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="$emit('clear')">清除已完成</button>
  </footer>
</template>

<script>
export default {
  // 找父组件要list数据
  props: ['list'],

  data() {
    return {
      current: '全部',
    };
  },

  methods: {

    turn (sel) {

      // 点谁就把谁的文字赋值给current
      // 那样动态类就生效了
      this.current = sel
      // 传递给父
      this.$emit('changeStatus', sel)
    },

    // clear () {

    //   // 通知父组件删除，如果不需要传参数
    //   // 可以就不写第二个参数
    //   this.$emit('clear')
    // }
  }
};
</script>